<template>
	<div class="app-container">
		<div class="filter-container">
			<el-button class="filter-item" type="danger" size="small" @click="delArticle('all')" :disabled="checkedIds.length === 0">删除选中</el-button>
			<el-button class="filter-item" type="primary" size="small" @click="articleOperate('add')">添加文章</el-button>
		</div>
		<el-table :data="list" border @selection-change="handleSelectionChange" v-loading="loading">
			<el-table-column align="center" type="selection" width="50"></el-table-column>
			<el-table-column prop="title" label="标题"></el-table-column>
			<el-table-column prop="image" align="center" width="150px" label="缩略图">
				<template slot-scope="scope">
					<el-popover placement="right" trigger="hover">
						<img :src="scope.row.image" style="max-height: 300px;max-width: 500px" />
						<img slot="reference" :src="scope.row.image" style="max-height: 30px;max-width: 130px" />
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column prop="create_date" align="center" label="发布日期" width="200"></el-table-column>
			<el-table-column label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="articleOperate('edit', scope.row._id)">编辑</el-button>
					<el-button @click.native="delArticle('one', scope.row._id)" type="text" size="small" style="color: red;">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :limit.sync="limit" :page.sync="page" :total="Number(total)" @pagination="pagination" />
		<edit :title="operateName" :visible="formVisible" :type="operateType" :loading="formLoading" :article="article"  @close="editClose" @success="getList" />
	</div>
</template>

<script>
import Pagination from '@/components/Pagination'
import edit from './edit'

export default {
	components: {
		Pagination,
		edit
	},
	data() {
		return {
			page: 1, // 当前页数
			total: 0, // 总条数
			limit: 10, // 每页显示条数
			list: [],
			loading: false,
			checkedIds: [], // 选中的文章ID
			formVisible: false,
			formLoading: false,
			operateName: '添加文章',
			operateType: 'add',
			article: {}
		};
	},
	created() {
		this.getList();
	},
	methods: {
		pagination(e) {
			if (e) {
				this.page = e.page;
				this.limit = e.limit;
			}
			this.getList();
		},
		getList() {
			this.loading = true;
			uniCloud
				.callFunction({
					name: 'getArticleList',
					data: {
						page: this.page,
						limit: this.limit
					}
				})
				.then(res => {
					this.loading = false;
					this.total = res.result.total;
					this.list = res.result.data;
				})
		},
		editClose() {
			this.formVisible = false;
		},
		// 翻页
		handleSizeChange(val) {
			this.limit = val;
			this.getList();
		},
		
		// 翻页
		handleCurrentChange(val) {
			this.page = val;
			this.getList();
		},
		// 获取选中
		handleSelectionChange(val) {
			this.checkedIds = [];
			val.forEach(item => {
				this.checkedIds.push(item._id);
			});
		},
		// 删除文章
		delArticle(type, id) {
			this.$confirm('此操作将删除选中的文章, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					uniCloud
						.callFunction({
							name: 'updateArticle',
							data: {
								id: type === 'one' ? id : this.checkedIds,
								delete_date: new Date().toLocaleDateString()
							}
						})
						.then(res => {
							this.$message({
								type: 'success',
								message: '删除成功',
								duration: 800,
								offset: 200,
								onClose: () => {
									this.getList();
								}
							});
						});
				})
				.catch(() => {
					// 取消
				});
		},
		articleOperate(type, articleId) {
			this.operateType = type;
			if (type === 'add') {
				this.operateName = '添加文章';
				this.article = {};
			} else if (type === 'edit') {
				this.operateName = '编辑文章';
				this.formLoading = true;
				uniCloud
					.callFunction({
						name: 'getArticle',
						data: {
							id: articleId
						}
					})
					.then(res => {
						this.formLoading = false;
						this.article = res.result.data[0];
					});
			}
			this.formVisible = true;
		}
	}
};
</script>
<style lang="scss" scoped>

</style>
